<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>裁剪头像</title>
    <style type="text/css">
        *{padding:0;margin:0;}  html,body{height:100%;width:100%;}  .clipbg {background: #FFF;width: 100%;height: 100%;}  .clipbg #clipArea {width: 100%;height: calc(100% - 97px);}  .clipbg .footer {width: 100%;position: fixed;bottom: 0px;text-align: center;}  #clipBtn{display:block;height: 48px;line-height: 48px;border-radius: 2px;background: #ffffff;border-bottom:1px solid #F6F6F6;color:#333;}  .backs {display:block;height: 48px;line-height: 48px;border-radius: 2px;background: #ffffff;color:#333;}
    </style>
</head>
<body>
<div class="clipbg">
    <div id="clipArea"></div>
    <div class="footer">
        <div id="clipBtn">完成裁剪</div>
        <div class="backs">取消</div>
    </div>
    <input type="file" id="file" accept="image/*" >
</div>
</body>
<script type='text/javascript' src='//static.115z.com/m/js/zepto.min.js' charset='utf-8'></script>
<script type="text/javascript" src="//static.115z.com/m/js/hammer.min.js"></script>
<script type="text/javascript" src="//static.115z.com/m/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="//static.115z.com/m/js/iscroll-zoom-min.js"></script>
<script type="text/javascript" src="//static.115z.com/m/js/PhotoClip.js"></script>
<script>
    var p = window.parent;
    function upload(){
        $("#file").click();
    }
    var clipArea = new PhotoClip("#clipArea", {
        size: [300, 300], //裁剪框大小
        outputSize: [0, 0], //打开图片大小，[0,0]表示原图大小
        file: $("#file"),
        ok: "#clipBtn",
        loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）

        },
        loadComplete: function() { //图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
            p.$.popup('.popup-trim');
            p.$(".popup-overlay").remove();

        },
        done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
            p.saveUserHead(dataURL);
            console.log("处理完毕！");
        }
    });

    //关闭按钮
    $(".backs").click(function(){
        p.$.closeModal('.popup-trim');
    });
</script>
</html>